import 'package:flutter/material.dart';

class WLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    MediaQueryData mq = MediaQuery.of(context);
    // 屏幕密度
    double pixelRatio = mq.devicePixelRatio;

    return Scaffold(
      appBar: AppBar(
        title: Text("布局"),
      ),
      body: ListView(
        children: <Widget>[
          //顶部图片
          buildTop(),
          //位置和星星
          buildSubmit(),
          //电话，定位，分享
          buildUtils(),
          //介绍
          buildDesc(),
//          Text(
//              "宽度dp:${MediaQuery.of(context).size.width},高度dp:${MediaQuery.of(context).size.height}"),
//          Text(
//              "宽度px:${MediaQuery.of(context).size.width * pixelRatio},高度px:${MediaQuery.of(context).size.height * pixelRatio}"),
        ],
      ),
    );
  }

  Widget buildTop() {
    return Image.asset(
      "images/img/lake.jpg",
      width: double.infinity,
      height: 240,
      fit: BoxFit.cover,
    );
  }

  Widget buildSubmit() {
    return Padding(
      padding: EdgeInsets.only(top: 20, left: 10, right: 10, bottom: 5),
      child: Row(
        children: <Widget>[
          Expanded(
              child: Padding(
            padding: EdgeInsets.all(8),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text("Oeschinen Lake Campground",
                    style: new TextStyle(
                      fontWeight: FontWeight.bold,
                    )),
                SizedBox(
                  height: 10,
                ),
                Text('Kandersteg, Switzerland',
                    style: new TextStyle(
                      color: Colors.grey[500],
                    )),
              ],
            ),
          )),
          Container(
            margin: EdgeInsets.only(right: 20),
            child: Row(
              children: <Widget>[
                Icon(
                  Icons.star,
                  color: Colors.red,
                ),
                Text("41"),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget buildUtils() {
    return Container(
      margin: EdgeInsets.only(left: 30, right: 30, top: 20),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Column(
            children: <Widget>[
              Icon(
                Icons.phone,
                color: Colors.blue,
              ),
              SizedBox(
                height: 5,
              ),
              Text(
                "CALL",
                style: TextStyle(
                    fontSize: 10,
                    color: Colors.blue,
                    fontWeight: FontWeight.bold),
              )
            ],
          ),
          Column(
            children: <Widget>[
              Icon(
                Icons.location_on,
                color: Colors.blue,
              ),
              SizedBox(
                height: 5,
              ),
              Text(
                "ROUTE",
                style: TextStyle(
                    fontSize: 10,
                    color: Colors.blue,
                    fontWeight: FontWeight.bold),
              )
            ],
          ),
          Column(
            children: <Widget>[
              Icon(
                Icons.share,
                color: Colors.blue,
              ),
              SizedBox(
                height: 5,
              ),
              Text(
                "SHARE",
                style: TextStyle(
                    fontSize: 10,
                    color: Colors.blue,
                    fontWeight: FontWeight.bold),
              )
            ],
          ),
        ],
      ),
    );
  }

  Widget buildDesc() {
    return Container(
      margin: EdgeInsets.only(left: 10, right: 10, top: 20, bottom: 20),
      child: Text(
        "Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese Alps. Situated 1,578 meters above sea level, it is one of the larger Alpine Lakes. A gondola ride from Kandersteg, followed by a half-hour walk through pastures and pine forest, leads you to the lake, which warms to 20 degrees Celsius in the summer. Activities enjoyed here include rowing, and riding the summer toboggan run.",
        softWrap: true,
      ),
    );
  }
}
